<!-- TemperatureConverter.vue -->
<script setup lang="ts">
import { ref, computed } from 'vue'

const celsius = ref(0)
const fahrenheit = ref(32)

// 摄氏度转华氏度
const celsiusToFahrenheit = computed({
  get: () => {
    return (celsius.value * 9/5 + 32).toFixed(1)
  },
  set: (value) => {
    celsius.value = Math.round((parseFloat(value) - 32) * 5/9)
  }
})

// 华氏度转摄氏度
const fahrenheitToCelsius = computed({
  get: () => {
    return ((fahrenheit.value - 32) * 5/9).toFixed(1)
  },
  set: (value) => {
    fahrenheit.value = Math.round(parseFloat(value) * 9/5 + 32)
  }
})
</script>

<template>
  <div class="temperature-converter">
    <h3>温度转换器</h3>
    <div class="input-group">
      <label>摄氏度 (°C):</label>
      <input 
        type="number" 
        v-model="celsius"
        @input="fahrenheitToCelsius = celsius"
      >
    </div>
    <div class="input-group">
      <label>华氏度 (°F):</label>
      <input 
        type="number" 
        v-model="fahrenheit"
        @input="celsiusToFahrenheit = fahrenheit"
      >
    </div>
  </div>
</template>

<style scoped>
.temperature-converter {
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-top: 10px;
}

.input-group {
  margin-bottom: 10px;
}

input {
  margin-left: 10px;
  padding: 5px;
}
</style>